<template>
  <div class="config">
    <header class="header">
      <button class="back-btn" @click="goBack">← 返回</button>
      <h1>{{ moduleTitle }}</h1>
    </header>
    
    <main class="main">
      <form class="config-form" @submit.prevent="startTraining">
        <div class="form-group">
          <label>训练模式：</label>
          <div class="radio-group">
            <label>
              <input 
                type="radio" 
                v-model="trainingConfig.trainingModeType" 
                value="TIME_LIMITED"
              > 限时模式
            </label>
            <label>
              <input 
                type="radio" 
                v-model="trainingConfig.trainingModeType" 
                value="QUESTION_COUNT_LIMITED"
              > 限题数模式
            </label>
          </div>
        </div>
        
        <div class="form-group" v-if="trainingConfig.trainingModeType === 'TIME_LIMITED'">
          <label>训练时长（分钟）：</label>
          <select v-model="trainingConfig.durationMinutes">
            <option value="3">3分钟</option>
            <option value="4">4分钟</option>
            <option value="5">5分钟</option>
            <option value="6">6分钟</option>
          </select>
        </div>
        
        <div class="form-group" v-else>
          <label>题目数量：</label>
          <select v-model="trainingConfig.questionCount">
            <option value="20">20题</option>
            <option value="25">25题</option>
            <option value="30">30题</option>
            <option value="40">40题</option>
            <option value="50">50题</option>
            <option value="60">60题</option>
            <option value="70">70题</option>
            <option value="80">80题</option>
            <option value="90">90题</option>
            <option value="100">100题</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>题型：</label>
          <select v-model="trainingConfig.questionType">
            <option v-for="type in questionTypes" :key="type.name" :value="type.name">{{ type.label }}</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>选项个数：</label>
          <select v-model="trainingConfig.optionCount">
            <option value="2">2个</option>
            <option value="3">3个</option>
            <option value="4">4个</option>
          </select>
        </div>
        
        <div class="form-group" v-if="moduleType === 'ARITHMETIC_FLASHCARD'">
          <label>单题作答时间（秒）：</label>
          <select v-model="trainingConfig.perQuestionTimeSeconds">
            <option value="2">2秒</option>
            <option value="3">3秒</option>
            <option value="4">4秒</option>
            <option value="5">5秒</option>
          </select>
        </div>
        
        <button type="submit" class="start-btn">保存并开始</button>
      </form>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import trainingService from '@/services/trainingService'

const router = useRouter()

const props = defineProps({
  moduleType: {
    type: String,
    required: true
  }
})

const questionTypes = ref([])

const trainingConfig = ref({
  trainingModeType: 'QUESTION_COUNT_LIMITED',
  durationMinutes: 3,
  questionCount: 20,
  questionType: '',
  optionCount: 3,
  perQuestionTimeSeconds: 3
})

const moduleTitle = computed(() => {
  switch (props.moduleType) {
    case 'ARITHMETIC_QUIZ':
      return '算术摸底'
    case 'ARITHMETIC_FLASHCARD':
      return '算术闪卡'
    default:
      return '训练配置'
  }
})

const goBack = () => {
  router.go(-1)
}

const startTraining = () => {
  // 保存配置到本地存储
  localStorage.setItem('currentModuleType', props.moduleType)
  localStorage.setItem(`math_training_config_${props.moduleType}`, JSON.stringify(trainingConfig.value))
  
  // 跳转到训练页
  router.push('/training')
}

onMounted(async () => {
  // 获取题型列表
  try {
    questionTypes.value = await trainingService.getQuestionTypes()
    // 如果没有默认题型，则选择第一个
    if (trainingConfig.value.questionType === '' && questionTypes.value.length > 0) {
      trainingConfig.value.questionType = questionTypes.value[0].name
    }
  } catch (error) {
    console.error('获取题型列表失败:', error)
    // Fallback to hardcoded values in case of error
    questionTypes.value = [
      { name: 'ONE_DIGIT_ADDITION', label: '1位数 + 1位数' },
      { name: 'TWENTY_WITHIN_ADD_SUB', label: '20以内加减法' },
      { name: 'TWO_DIGIT_ADD_SUB_ONE_DIGIT', label: '两位数加减1位数' }
    ]
    if (trainingConfig.value.questionType === '' && questionTypes.value.length > 0) {
      trainingConfig.value.questionType = questionTypes.value[0].name
    }
  }
  
  // 尝试从本地存储加载配置
  const savedConfig = localStorage.getItem(`math_training_config_${props.moduleType}`)
  if (savedConfig) {
    trainingConfig.value = { ...trainingConfig.value, ...JSON.parse(savedConfig) }
  }
})
</script>

<style scoped>
.config {
  min-height: 100vh;
  background-color: #f0f8ff;
}

.header {
  background-color: #4a90e2;
  color: white;
  padding: 1rem;
  display: flex;
  align-items: center;
  position: relative;
}

.back-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem;
  position: absolute;
  left: 1rem;
}

.header h1 {
  flex-grow: 1;
  text-align: center;
  margin: 0;
  font-size: 1.5rem;
}

.main {
  padding: 2rem;
}

.config-form {
  max-width: 500px;
  margin: 0 auto;
  background-color: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #333;
}
</style>